import { FC } from 'react'

import { useClock, useDate, useWeek } from '@/hooks/useTime'
import { useStore } from '@/store'

interface Props {}

const Time: FC<Props> = () => {
  const clock = useClock()
  const date = useDate()
  const week = useWeek()
  const { interactive } = useStore()

  return (
    <div className="time-page" onClick={() => interactive.setSignVisible(true)}>
      <div className="time">
        <h1>{clock}</h1>
        <p>
          {date} {week}
        </p>
      </div>
    </div>
  )
}

export default Time
